<template>
    <el-row>
        <el-col :span="24">
            <p class="introduction">{{introduction}}</p>
        </el-col>
    </el-row>
    <el-row>
       <el-col :span="10">
         <el-table :data="tableData" stripe style="width: 100%;height: 100%" height="440">
            <el-table-column prop="breakerid" label="编号" width="180" />
            <el-table-column prop="reason" label="原因" width="180" />

            <el-table-column prop="caozuo" label="操作" />
        </el-table>
       </el-col>
       <el-col :span="14">
        <el-card class="box-card-docFile">
            <div class="photo-list">  
                <ul>  
                    <li v-for="(photo, index) in photos" :key="index" class="photo-item" >
                        <el-image :src="photo.url" fit="cover" class="photo" @click="getImgDetail(photo)"></el-image>
                        <el-button type="primary" @click="downloadDoc(photo)">下载</el-button>
                        <p class="photo-name">{{photo.fileName}} </p>  
                    </li>  
                </ul>  
            </div> 
        </el-card>    
       </el-col>  
    </el-row>
</template>

<script lang="ts" setup>
import { computed, defineComponent, onMounted, ref,watch } from "vue";
import {ElImage} from 'element-plus';
import wordImg from '@/assets/wordImg.png';
import axios from "axios";
import {BASE_URL} from '@/utils/common.js'

 const introduction = ref('简介')

 const photo =ref({})
 // 假设你的图片位于 src/assets/ 目录下  
const photos = ref([  
//   { url: wordImg,fileName:'文件名1' }, // 使用 require 引入图片资源  
//   { url: wordImg,fileName:'文件名2' },  
  // ... 更多图片数据  
]); 

const tableData = ref([])

const downloadDoc = async (photo)=>{
    const docUrl = BASE_URL+'/downloadDoc?fileName='+photo.fileName
    
    try {  
      const response = await axios({  
        method: 'get',  
        url: docUrl, // 你的后端下载接口  
        responseType: 'blob', // 表明服务器返回的数据类型  
      });  
    
      // 创建一个 blob 对象  
      const url = window.URL.createObjectURL(new Blob([response.data]));  
      console.log(url)
      // 创建一个a标签用于下载  
      const link = document.createElement('a');  
      link.href = url;  
      link.setAttribute('download', photo.fileName+'.docx'); // 设置下载文件名  
      document.body.appendChild(link);  
      link.click(); // 模拟点击  
      // 然后移除这个元素  
      document.body.removeChild(link);  
    } catch (error) {  
      console.error('下载文件失败:', error);  
    }
}

const getImgDetail=async (photo)=>{
    try{
     const response = await axios({
        method:'get',
        url: BASE_URL+'/getDetailByFileName?fileName='+photo.fileName
      })
     
     tableData.value = response.data;
    }catch (error) {  
            console.error('获得文件名失败:', error);  
    }  
}

onMounted(
    async ()=>{
     try{
            const response = await axios({  
                method: 'get',  
                url: BASE_URL+'/getFaultFileNames', // 你的后端下载接口   
            }); 
            for(let i =0;i<response.data.length;i++){
                let item = response.data[i]
                photos.value.push({url:wordImg,fileName:item})
            }
        }catch (error) {  
            console.error('获得文件名失败:', error);  
        }  
      
    }
)

</script>

<style scoped lang="scss">
.introduction{
    color: rgb(245, 245, 245);
}

.photo-list {  
  width: 100%;  
  display: flex;  
  flex-wrap: wrap;  
  margin-left: 10px;
  padding: 0; /* 去除默认的列表内边距 */  
}  
 
.photo-list ul {  
  display: flex; /* 使用弹性布局 */  
  flex-wrap: wrap; /* 允许换行 */  
  list-style: none; /* 去除默认的列表样式 */  
  padding: 0; /* 去除默认的列表内边距 */  
  margin:0;
}  

.photo-item {  
  margin: 10px;  
  list-style: none;  
}  
  
.photo {  
  width: 90px; /* 或者你想要的任何尺寸 */  
  height: auto;  
  cursor: pointer;
}  

.photo-name{
    margin: 0;
    margin-left:px;
    font-size: 12px;  
    color: rgb(245, 245, 245);  
}

.box-card-docFile{
    height: 440px;
    color: rgb(245, 245, 245); 
    background-color: rgb(26, 68, 94);
    border-width: 0;
    overflow-y: auto; /* 当内容溢出时显示滚动条 */ 
}
</style>